<template>
  <div class="progress-content">
    <viHeader
      :title="title"
      :radioList="radioList"
      @enlarge="enlarge"
      @changeRadio="changeRadio"
      v-if="!showHeader"
    />
    <div class="progress-section" :style="{height:height}">
      <div class="progress-list-form">
        <div class="title"></div>
        <div class="right">
          <div class="right-list" v-for="item in titleList">{{ item }}</div>
        </div>
      </div>
      <div class="progress-list-form" v-for="item in listData">
        <div class="title">{{item.deptName}}</div>
        <div class="banner">
          <div class="banner-list banner-list-1" 
          :data-border="item.infos.type1===2" 
          :data-next="item.infos.type2!==3" 
          :data-background="item.infos.type1===3"></div>
          <div class="banner-list" 
          :data-border="item.infos.type2===2" 
          :data-next="item.infos.type3!==3" 
          :data-background="item.infos.type2===3"></div>
          <div class="banner-list" 
          :data-border="item.infos.type3===2" 
          :data-next="item.infos.type4!==3" 
          :data-background="item.infos.type3===3"></div>
          <div class="banner-list" 
          :data-border="item.infos.type4===2" 
          :data-next="item.infos.type5!==3" 
          :data-background="item.infos.type4===3"></div>
          <div class="banner-list" 
          :data-border="item.infos.type5===2" 
          :data-background="item.infos.type5===3"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import viHeader from "@/components/visualization/header/index";
export default {
  name: "vi-progress",
  components: {
    viHeader
  },
  props:{
    showHeader:{
      default:false,
    },
    height:{
      default:null,
    },
  },
  data() {
    return {
      titleList: ["申请", "外证", "交税", "开票", "抵扣"],
      title: {
        name: "",
        unit: "万元"
      },
      radioList: {
        radio: "2",
        list: []
      },
      listData:[],
    };
  },
  created(){
    const time=new Date()
    const month=time.getMonth()+1
    this.title.name=`${month}月业务进展`
  },
  methods: {
    enlarge() {
      this.$emit("enlarge")
    },
    changeRadio(val) {
      console.log(val);
    },
    open(val){
      this.listData=val
    },
  }
};
</script>

<style scoped lang="scss">
@import "../styles/progress.scss";
</style>
